<template>
    <div class="riskAuditList">
        <!--搜索框-->
        <div class="interview-header">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input v-model="searchItem.phone" placeholder="用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.realName" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item label="风控初审状态" prop="riskStatus">
                    <el-select  v-model.number="searchItem.riskStatus" placeholder="风控初审状态">
                        <el-option label="待批复" :value=0></el-option>
                        <el-option label="已批复" :value=1></el-option>
                        <el-option label="已确认" :value=2></el-option>
                        <el-option label="不通过" :value=3></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <el-table border :data="tableData" tooltip-effect="dark">
                <el-table-column type="index" prop="" align="center" label="序号" width="70"></el-table-column>
                <el-table-column prop="riskStatus" align="center" label="状态" width="100"></el-table-column>
                <el-table-column prop="createTime" align="center" label="申请时间" width="190"></el-table-column>
                <el-table-column prop="loanNo" align="center" label="订单编号" width="200">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: {loanNo: scope.row.loanNo, userNo: scope.row.userNo}}" style="color: #20a0ff">{{scope.row.loanNo}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" align="center" label="借款人" width="110"></el-table-column>
                <el-table-column prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column prop="carType" align="center" label="车型" width="150"></el-table-column>
                <el-table-column prop="carRemark" align="center" label="说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="loanAmount" align="center" label="申请额度（元）" width="140"></el-table-column>
                <el-table-column prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column prop="salesman" align="center" label="业务员" width="150"></el-table-column>
                <el-table-column prop="signTime" align="center" label="面签时间" width="190"></el-table-column>
                <el-table-column prop="signUser" align="center" label="面签人" width="150"></el-table-column>
                <el-table-column prop="signAmount" align="center" label="面签额度（元）" width="140"></el-table-column>
                <el-table-column prop="signLoanTime" align="center" label="借款期限" width="100"></el-table-column>
                <el-table-column prop="signInterestRate" align="center" label="利率（%）" width="120"></el-table-column>
                <el-table-column prop="signFee" align="center" label="综合服务费（元）" width="160"></el-table-column>
                <el-table-column prop="signRepayType" align="center" label="还款方式" width="100"></el-table-column>
                <el-table-column prop="signRemark" align="center" label="面签说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskUser" align="center" label="风控人" width="150"></el-table-column>
                <el-table-column prop="riskRemark" align="center" label="风控说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" label="操作" fixed="right" width="200">
                    <template scope="scope">
                        <el-button size="small" @click="returnLoan(scope.row)">退回</el-button>
                        <el-button size="small" @click="sureRiskAudit(scope.row)" type="primary" v-if="scope.row.riskStatus === '待批复'">风控批复</el-button>
                        <el-button size="small" @click="openRiskConfirm(scope.row)" type="primary" v-else-if="scope.row.riskStatus === '已批复'">确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--风控初审确认-->
        <el-dialog title="风控初审确认" :visible.sync="dialogriskConfirm" class="dialogriskConfirm">
            <el-form :model="riskConfirm" ref="interviewConfirmed" class="el-form" :inline="true" labelWidth="80px"  :rules="ruleRiskConfirm">
                <el-form-item label="是否通过" prop="passStatus" required>
                    <el-radio-group v-model.number="riskConfirm.passStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item><br>

                <el-form-item label="确认人" prop="riskConfirmUser" required>
                    <el-input :value="riskConfirmUserInfo" :disabled="true"></el-input>
                </el-form-item><br>

                <el-form-item label="确认说明" prop="riskConfirmRemark">
                    <el-input type="textarea" v-model="riskConfirm.riskConfirmRemark" :rows="5" style="width: 473px;" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeRiskConfirm()">取 消</el-button>
                <el-button type="primary" @click="subSignConfirm()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { listLoanRisk, riskConfirm, returnLoanCheck } from "@/api/api";
    export default {
        name: "riskAuditList",
        data () {
            return {
                total: 0,
                pagesize: ["10","30","50"],
                // 查询；
                searchItem: {
                    loanNo: "",
                    phone: "",
                    realName: "",
                    riskStatus: "",
                    pageNum: 1,
                    pageSize: 10
                },
                // 风控列表；
                tableData: [],
                // 风控初审确认
                riskConfirmUserInfo: "",
                dialogriskConfirm: false,
                riskConfirm: {
                    loanNo: "",
                    passStatus: 1,
                    riskConfirmUser: "",
                    riskConfirmRemark: ""
                },
                ruleRiskConfirm: {
                    // remark
                    riskConfirmRemark: [
                        { max: 2000, required: true, message: '审核说明在2000字以内', trigger: 'blur' }
                    ]
                }
            };
        },
        mounted () {
            this.$nextTick(() => {
                if (window.sessionStorage["sysUser"]) {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.riskConfirmUserInfo = userInfo.name;
                    this.riskConfirm.riskConfirmUser = userInfo.userNo;
                } else {
                    this.$router.push({path: '/login'});
                }
                this.loadData();
            });
        },
        watch: {
            $route (to) {
                if(to.name === "riskAuditList"){
                    this.loadData();
                }
            }
        },
        methods: {
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.loadData();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.loadData();
            },
            // 重置
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 风控列表、查询；
            async loadData () {
                let _this = this;
                await listLoanRisk(this.searchItem).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.tableData = Data.list;
                    _this.total = Data.total;
                    let arr = _this.tableData;
                    if (arr) {
                        for (let i=0; i<arr.length; i++) {
                            let rmStatusArr = ["待批复", "已批复", "已确认", "不通过"];
                            let DateUnit = ["年", "月", "日"];
                            let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                            // 状态
                            arr[i].riskStatus = rmStatusArr[arr[i].riskStatus];

                            // 申请时间
                            if (arr[i].createTime) {
                                arr[i].createTime = _this.formatTime(arr[i].createTime);
                            };

                            // 面签时间
                            if (arr[i].signTime) {
                                arr[i].signTime = _this.formatTime(arr[i].signTime);
                            };

                            // 面签期限
                            if (arr[i].signLoanTime) {
                                if (DateUnit[arr[i].signLoanUnit]) {
                                    arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];
                                }
                            };

                            // 申请期限
                            if (arr[i].loanTime) {
                                if(arr[i].loanUnit === "0" || arr[i].loanUnit === "1" || arr[i].loanUnit === "2"){
                                    arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                                } else {
                                    arr[i].loanTime = arr[i].loanTime + arr[i].loanUnit;
                                }
                            };

                            // 还款方式
                            arr[i].signRepayType = signRepayType[arr[i].signRepayType];
                        };
                    }
                });
            },
            // 风控批复
            sureRiskAudit (rows) {
                this.$router.push({path: '/riskAuditReply', query: { loanNo: rows.loanNo }});
            },
            // 点击确认按钮， 打开风控初审确认弹框
            openRiskConfirm (rows) {
                this.dialogriskConfirm = true;
                this.riskConfirm.loanNo = rows.loanNo;
            },
            // 关闭风控初审确认弹框
            closeRiskConfirm () {
                this.dialogriskConfirm = false;
                this.riskConfirm.riskConfirmRemark = "";
            },
            // 风控初审确认
            subSignConfirm () {
                let _this = this;
                this.$refs.interviewConfirmed.validate((valid) => {
                    if (valid) {
                        riskConfirm(this.riskConfirm).then(function(res) {
                            if (res.data.state.code === "200") {
                                _this.$message({
                                    message: "成功",
                                    type: 'success'
                                });
                                _this.dialogInterviewConfirmed = false;
                                _this.loadData();
                                _this.closeRiskConfirm();
                            } else {
                                _this.$message({
                                    message: res.data.state.message,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 编辑；
            editList (rows) {
                this.$router.push({path: '/applyTable', query: { loanNo: rows.loanNo, productNo: rows.productNo, userNo: rows.userNo }});
            },
            // 退回
            returnLoan (row) {
                let _this = this;
                this.$confirm('是否退回?', '提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'warning'
                }).then(() => {
                    returnLoanCheck({
                        "loanNo": row.loanNo
                    }).then((res) => {
                        if (res.data.state.code === "200") {
                            _this.$message({
                                message: "成功",
                                type: 'success'
                            });
                            _this.loadData();
                        } else {
                            _this.$message(res.data.state.message);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .riskAuditList{
        /*搜索框*/
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        /*列表*/
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
        }
        /*分页*/
        .pageNum{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding: 0;
            }
        }
        .dialogriskConfirm{
            .el-form {
                width: 564px;
                margin: 0 auto;
            }
        }
    }

</style>
